<template>
	<div class="search-container">
		<!-- <div style="width: 40vh;"> -->
		<!-- <uni-search-bar class="uni-mt-10" placeholder="搜索姓名,手机等" clearButton="none" cancelButton="none"
			@confirm="search"  @click="shosuo" readonly /> -->
		<input class="sosuop" v-model="val" @click="shosuo" placeholder="搜索姓名,手机等" readonly disabled />
		<!-- </div> -->
		<div @click="abolish()"  class="cancel-all-btn">取消所有</div>
	</div>
	<scroll-view scroll-x="true" class="navbar">
		<view class="nav-item" v-for="item in list1" :key="item" :class="{ 'active': item.name === currentNavItem }"
			@click="click(item.name,item.const)">
			{{ item.name }}
		</view>
	</scroll-view>
	<div class="info-container">
		<div class="date-range">
			{{ date }} {{ tiem }}
		</div>
		<div v-if="listLength!=''" class="record-count">
			共有{{listLength}}条符合条件记录
		</div>
		<div v-if="listLength ==''" class="record-count">
			没有条符合条件记录
		</div>
	</div>
	<view v-for="(l,index) in list" :key="l">
		<view v-if="l && l.order && l.order.appointmentstatus != undefined ">
			<div class="zuyaonr">
				<div class="rqsj">
					<img src="/static/rq.png" class="rqtup" /> {{ l.date }} {{ l.tiem }}
				</div>
				<div class="appointment-info">
					<div class="info-row">
						<div class="label" style="color: #27aabf;">状态:</div>
						<div v-if="l && l.order &&l.order.appointmentstatus == 1 && l.order.appointmentstatus != 'undefined'  "
							class="valul">⊙预约成功<span style="color: #838383;">，未核销</span></div>
						<div v-if="l && l.order &&l.order.appointmentstatus == 0 && l.order.appointmentstatus != 'undefined'  "
							class="valul"><span style="color: #838383;">，已取消</span>
						</div>
						<div v-if="l && l.order &&l.order.appointmentstatus == 2  && l.order.appointmentstatus != 'undefined' "
							class="valul"><span style="color: #838383;">，已核销</span>
						</div>
					</div>
					<div class="info-row">
						<div class="label">姓名:</div>
						<div class="valul">{{ l && l.order &&l.order.customername }}</div>
					</div>
					<div class="info-row">
						<div class="label">手机号:</div>
						<div class="valul">{{ l && l.order &&l.order.contactphone }}</div>
					</div>
					<div class="info-row">
						<div class="label">家庭地址:</div>
						<div class="valul">{{l && l.order &&l.order.address }}</div>
					</div>
					<div class="info-row">
						<div class="label">户型面积:</div>
						<div class="valul">{{ l && l.order &&l.order.housearea }}</div>
					</div>
				</div>
				<div class="tjsj">
					提交: {{l && l.order &&l.order.submittime}}
				</div>
				<div class="hexiao-container">
					<div v-if="l && l.order &&l.order.appointmentstatus == 1 && l.order.appointmentstatus != 'undefined'  "
						class="hexiao" @click="updatatate(l.order.id)">核销预约</div>
					<div v-if="l && l.order &&l.order.appointmentstatus == 1 && l.order.appointmentstatus != 'undefined' "
						@click="showCancelDialog(l.order.id,index)" class="hexiao"
						style="background-color: #dfdfdf; color: #737c7d;">取消预约</div>
					<div @click="dels(l.order.id)" class="hexiao" style="background-color: #fcd1af; color: #ff7b14;">删除</div>
				</div>
				<div class="yeis">
					<div style="color: #7d7d7d;">
						{{index+1}}
					</div>
				</div>
			</div>
		</view>
	</view>
	<!-- 核销预约框 -->
	<uni-popup ref="ppd" type="dialog">
		<uni-popup-dialog cancelText="取消" confirmText="确定" title="温馨提示" :content="nrtsk"
			@confirm="dialogConfirm()"></uni-popup-dialog>
	</uni-popup>
	<!-- //取消所有 -->
	<uni-popup ref="delabolish" type="dialog">
		<uni-popup-dialog title="取消所有预约" type="info" @confirm="delabolishConfirms()">
			<view style="width: 100%;margin: 10px;">
				<text>取消理由（选填）：</text>
				<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></uni-easyinput>
			</view>
		</uni-popup-dialog>
	</uni-popup>
	<uni-popup ref="pp" type="dialog">
		<!-- 取消预约框 -->
		<uni-popup-dialog title="取消预约" type="info" @confirm="dialogConfirms()">
			<view style="width: 100%;margin: 10px;">
				<text>取消理由（选填）：</text>
				<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></uni-easyinput>
			</view>
		</uni-popup-dialog>
	</uni-popup>
	<!-- 删除提示框 -->
	<uni-popup ref="del" type="dialog">
		<uni-popup-dialog title="确认删除" type="info" @confirm="delConfirm()">
		</uni-popup-dialog>
	</uni-popup>
	<!-- 消息提示框 -->
	<uni-popup ref="message" type="message">
		<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		nextTick
	} from 'vue';
	import {
		gonavigateTo,
		getdate,
	} from '@/request/wx.js';
	import {
		onLoad,
		onShow
	}
	from '@dcloudio/uni-app';
	import {
		showorder,
		showdate,
		showtiems,
		bystate,
		seekorder,
		uptate,
	} from '@/request/api.js'
	const list1 = ref([{
			name: '全部',
			const: 4
		},
		{
			name: '成功',
			const: 1
		},
		{
			name: '已取消',
			const: 0
		},
		{
			name: '已核销',
			const: 2
		},
		{
			name: '未核销',
			const: 1
		}
	]);
	const currentNavItem = ref('全部');
	const list = ref([])
	const val = ref('')
	const ppd = ref(null);
	const nrtsk = ref('');
	const message = ref(null)
	const messageText = ref('')
	const del = ref(null)
	const listLength = ref()
	const tiem = ref()
	const date = ref()
	const orderid = ref()
	const delabolish= ref(null)
	//获取传过来的时间段id
	let id;
	onLoad(async (e) => {
		id = e.id;
		showlis()
	});
	onShow(async () => {
		const result = uni.getStorageSync('result');
		val.value = result
		if (typeof result === 'string' && result.trim() !== '') {
			const data = {
				'id': id,
				'result': result
			}
			const req = await seekorder(data)
			show(req)
		}
		uni.removeStorageSync('result');
	})
	//进入页面显示
	async function showlis() {
		const data = {
			'id': id
		};
		const req = await showorder(data);
		show(req)
	}

	function search() {
		console.log('Searching...');
		// 实现搜索逻辑
	};

	const shosuo = () => {
		console.log("跳转搜索")
		gonavigateTo(`/pages/home/index/search?tid=${4}`);
	};

	function handleClick(status) {
		console.log("Clicked status:", status);
		// 这里可以添加路由跳转逻辑或其他逻辑
		// 例如: this.$router.push('/path-to-destination?status=' + status);
	};
	//取消所有按钮
	function abolish(){
		delabolish.value.open()
	}
	async function delabolishConfirms() {
		const data = {
			'id': 1,
			'staue': -2,
			'tiemid':id
		}
		const req = await uptate(data)
		if (req.data.data) {
			message.value.open()
			messageText.value = '取消成功'
		}
		setTimeout(() => {
			showlis()
		}, 2000); // 2000 毫秒后执行，即两秒后
	};
	//删除按钮
	function dels(id) {	
		del.value.open()
		orderid.value = id;
	}
	async function delConfirm() {
		const orderids = orderid.value
		const data = {
			'id': orderids,
			'staue': -1,
			'tiemid':id
		}
		const req = await uptate(data)
		if (req.data.data) {
			message.value.open()
			messageText.value = '删除成功'
		}
		setTimeout(() => {
			showlis()
		}, 2000); // 2000 毫秒后执行，即两秒后
	};
	//取消预约
	const showCancelDialog = (id, index) => {
		pp.value.open();
		orderid.value = id;
	};
	//确定取消预约
	async function dialogConfirms() {
		const id = orderid.value
		console.log('id', id)
		const data = {
			'id': id,
			'staue': 0,
			'tiemid':0
		}
		const req = await uptate(data)
		if (req.data.data) {
			message.value.open()
			messageText.value = '核销成功'
		}
		setTimeout(() => {
			showlis()
		}, 2000); // 2000 毫秒后执行，即两秒后
	};
	//修改状态
	async function updatatate(id) {
		orderid.value = id
		nrtsk.value = "确认【核销】？";
		ppd.value.open();
	}
	//确定
	async function dialogConfirm() {
		const id = orderid.value
		console.log('id', id)
		const data = {
			'id': id,
			'staue': 2,
			'tiemid':0
		}
		const req = await uptate(data)
		if (req.data.data) {
			message.value.open()
			messageText.value = '取消预约成功'
		}
		setTimeout(() => {
			showlis()
		}, 2000); // 2000 毫秒后执行，即两秒后
	};
	//分类
	async function click(item, ff) {
		currentNavItem.value = item;
		const data = {
			'id': id,
			'state': ff
		}
		const req = await bystate(data);
		show(req)
	};
	//显示封装
	async function show(req) {
		list.value = []; // 初始化为空数组，以便可以添加多个元素
		if (req.data.data && req.data.data.length > 0) { // 确保req.data是一个非空数组
			const promises = req.data.data.map(async (item) => {
				if (item && item != null) { // 确保item存在
					const datas = {
						'id': item.sdateid // 假设你需要的是item.sdateid
					};
					const reqs = await showdate(datas);
					const reqss = await showtiems({
						'id': item.id
					}); // 假设你需要传递整个item
					// 将获取的数据整合到一个对象中，并添加到 list 数组
					tiem.value = reqss.data.data
					date.value = getdate(reqs.data.data)
					return {
						'order': item, // 确保这里使用的是具体的数据部分
						'date': getdate(reqs.data.data), // 同上
						'tiem': reqss.data.data // 同上
					};
				}
			});
			// 使用 Promise.all 等待所有的异步操作完成
			const results = await Promise.all(promises);
			// 过滤掉results中可能的undefined值（如果某些item为null或未定义）
			list.value = results.filter(item => item);
			listLength.value = list.value.length; // 更新listLength
		} else {
			tiem.value = ''
			date.value = ''
			listLength.value = ''
		}
	}
	const cancelReason = ref('');
	const orderId = ref(null);
	const pp = ref(null)

	const dialogCancel = () => {
		showDialog.value = false;
	};

	const dialogConfirm1 = (id, status) => {
		// 处理确定取消的逻辑...
		showDialog.value = false;
	};
</script>

<style scoped>
	.sosuop {
		width: 512upx;
		border: 1px solid #ccc;
		/* 添加边框，颜色为浅灰色 */
		padding: 8px 12px;
		/* 添加内边距，使输入内容与边框之间有空间 */
		background-color: #fff;
		/* 设置背景颜色，这里使用白色 */
		border-radius: 4px;
		/* 边框圆角，可以根据需要调整 */
		box-shadow: inset 0 1px 3px #ddd;
		/* 添加内阴影，使框看起来更有立体感 */
		margin-right: 15px;
		margin-left: 10px;
		margin-top: 10px;
	}

	.search-container {
		display: flex;
		align-items: center;
		margin-top: -20upx;
		/* 根据需要调整上边距 */
	}

	.cancel-all-btn {
		background-color: #ff5500;
		/* 按钮背景颜色 */
		color: white;
		/* 文字颜色 */
		border: none;
		/* 无边框 */
		border-radius: 4px;
		/* 圆角 */
		font-size: 25upx;
		/* 字体大小 */
		cursor: pointer;
		/* 鼠标悬停时显示指针 */
		width: 124upx;
		height: 50upx;
		line-height: 50upx;
		/* 使文本垂直居中 */
		text-align: center;
		/* 使文本水平居中 */
		display: flex;
		/* 使用flex布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		margin-top: 20upx;
	}

	.navbar {
		display: flex;
		overflow-x: auto;
		white-space: nowrap;
		margin-top: 10px;
		border-bottom: 2px solid #d8d8d8;
		/* 添加底部边框 */
	}

	.navbar view {
		display: inline-block;
	}

	.nav-item.active {
		color: #27aabf;
		font-size: 18px;
		border-bottom: 3px solid #27aabf;
	}


	.nav-item {
		font-weight: bold;
		margin: 5px 10px;
		padding-bottom: 6px;
		font-size: 16px;
	}

	.date-range {
		margin-top: -5px;
		font-size: 13px;
		color: #666;
		margin-left: 392upx;
	}

	.record-count {
		margin-top: 12px;
		font-size: 16px;
		color: #666;
		display: flex;
		/* 使用flex布局 */
		flex-direction: column;
		/* 子元素垂直排列 */
		align-items: center;
		/* 水平居中对齐 */
		justify-content: center;
		/* 垂直居中对齐 */
	}

	.info-container {
		background-color: #f0f0f0;
		/* 灰色背景 */
		padding: 10px;
		/* 内边距 */
		border-radius: 4px;
		/* 圆角 */
		margin-top: 10px;
		/* 外边距 */
		display: flex;
		flex-direction: column;
		margin-top: 0upx;
		height: 100upx;
	}

	.zuyaonr {
		border: 1px solid #ccc;
		/* 边框颜色为灰色 */
		padding: 20px;
		/* 内边距 */
		margin-top: 0px;
		/* 外边距 */
		background-color: #fff;
		/* 背景颜色 */
		/* height: 490upx; */
		width: 622upx;
		margin-left: 22upx;
	}

	.rqsj {
		background-color: #e5e5e5;
		height: 80upx;
		width: 702upx;
		margin-left: -40upx;
		margin-top: -21px;
		display: flex;
		/* 使用flex布局 */
		align-items: center;
		/* 垂直居中 */
		font-size: 13px;
	}

	.rqtup {
		height: 22px;
		width: 24px;
	}

	.appointment-info {
		margin: 10px 0px;
		padding-bottom: 10px;
		border-bottom: 1px dashed #9c9c9c;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		/* 标签和值分布在行的两端 */
		align-items: center;
		/* 垂直居中 */
		margin-bottom: 10px;
	}

	.label {
		font-weight: bold;
		/* 加粗标签 */
		white-space: nowrap;
		/* 防止标签换行 */
		display: inline-block;
		/* 使元素作为行内块级元素 */
		text-align: right;
		/* 文本右对齐 */
		flex-shrink: 0;
		/* 防止标签压缩 */
		min-width: 80px;
		/* 所有标签的最小宽度一致 */
		margin-right: 10px;
		/* 标签和值之间的间距 */
		color: #838383;
	}

	.valul {
		flex-grow: 1;
		/* 允许值部分扩展填充空间 */
		text-align: left;
		/* 左对齐 */
	}

	.valul span {
		display: inline;
		/* 使span与外部文本处于同一级别 */
	}

	.tjsj {
		color: #868484;
		font-size: 13px;
		margin-left: 28px;
	}

	.hexiao {
		background-color: #c9b3d6;
		/* 按钮背景颜色 */
		color: #8b1dc1;
		/* 文字颜色 */
		border: none;
		/* 无边框 */
		border-radius: 4px;
		/* 圆角 */
		font-size: 28upx;
		/* 字体大小 */
		cursor: pointer;
		/* 鼠标悬停时显示指针 */
		width: 144upx;
		height: 64upx;
		line-height: 50upx;
		/* 使文本垂直居中 */
		text-align: center;
		/* 使文本水平居中 */
		display: flex;
		/* 使用flex布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		margin-top: 20upx;
		margin-left: 9px;
	}

	.hexiao-container {
		display: flex;
		/* 使用flex布局 */
		margin-left: 8px;
	}

	.yeis {
		background-color: #d8d8d8;
		width: 20px;
		height: 20px;
		text-align: center;
		float: right;
		clip-path: inset(0 round 16rpx 0 0 0);
		transform: translate(20px, 0px);
	}
</style>